<template>
  <div class="main">
    <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="ellipsis" />
      </template>
    </van-nav-bar>
    <div class="userInfo">
      <van-image :src="userInfo.userAvatar || defaultAvatar" fit="cover" />
      <div>
        <div>
          <span>{{ userInfo.userName }}</span>
          <van-icon
            name="user"
            :color="userInfo.gender === 1 ? '#11acfd' : '#ff9999'"
          />
        </div>
        <div>uid：{{ userInfo.uid }}</div>
        <div>地区：{{ userInfo.address || "未知" }}</div>
      </div>
    </div>
    <div class="cellGroup">
      <van-cell title="备注和标签" is-link />
      <van-cell title="朋友权限" is-link />
      <div class="slot"></div>
      <van-cell title="朋友圈" is-link />
      <van-cell title="更多信息" is-link />
      <div class="slot"></div>
      <div class="cell" v-if="areYouFriend">
        <van-icon name="comment-o" />
        <span @click="goMessage">发消息</span>
      </div>
      <div class="cell" v-else @click="goAddFriend">
        <van-icon name="friends-o" />
        <span>添加好友</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import defaultAvatar from "@/assets/cat.jpeg";
import { getUserInfo, addFriend, isFriend } from "@/api/user";
import { createGroup } from "@/api/chat";
import chatListStore from "@/store/module/chatList";
import indexedDBStore from "@/store/module/indexedDB";
import { addData } from "@/utils/utils";
import { GroupType } from "@/enum/group";

// 使用 History API 方式传递和接收
const friendInfo = history.state.userInfo;
let db = indexedDBStore();
const chatList = chatListStore();
let userInfo = ref({});
const areYouFriend = ref(false);
const myInfo = JSON.parse(localStorage.getItem("userInfo")) || {};
onMounted(() => {
  getUserInfo({
    username: friendInfo.friendName || friendInfo.userName,
  }).then((res) => {
    if (res.code === 200) {
      userInfo.value = res.data.userInfo;
    }
  });
  isFriend({
    friendId: friendInfo.uid,
  }).then((res) => {
    areYouFriend.value = res.data.isFriend;
  });
});
const router = useRouter();
const goSendMsg = () => {
  createGroup({
    groupName: friendInfo.friendName || friendInfo.userName,
    groupAvatar: userInfo.value.userAvatar || "",
    groupDesc: `${friendInfo.friendName || friendInfo.userName}和${
      myInfo.userName
    }的聊天`,
    groupType: GroupType.Single,
  }).then((res) => {
    if (res.code === 200) {
      let chatItem = {
        chatId: res.data.chatId,
        type: "notice",
        msg: "",
        from: {
          name: myInfo.userName,
          avatar: myInfo.userAvatar,
          id: myInfo.uid,
        },
        to: {
          name: friendInfo.friendName || friendInfo.userName,
          avatar: userInfo.value.userAvatar,
          id: userInfo.value.uid,
        },
        timeStamp: new Date().getTime(),
      };
      chatList.addChat(chatItem);
      const chatData = {
        chatId: chatItem.chatId,
        chatName: chatItem.to.name,
        chatAvatar: chatItem.to.avatar,
        toId: chatItem.to.id,
        belongToId: myInfo.uid,
      };
      addData(db.indexedDB, "chatList", chatData);
      router.push({
        path: "/chatRoom",
        state: {
          chatItem: JSON.parse(JSON.stringify(chatItem)),
        },
      });
    }
  });
};
const goMessage = () => {
  if (chatList.chatList.length === 0) {
    goSendMsg();
  } else {
    let chatItem =
      chatList.chatList.find(
        (item) =>
          item.from.id === myInfo.uid && item.to.id === userInfo.value.uid
      ) ||
      chatList.chatList.find(
        (item) =>
          item.from.id === userInfo.value.uid && item.to.id === myInfo.uid
      );
    if (chatItem) {
      router.push({
        path: "/chatRoom",
        state: {
          chatItem: JSON.parse(JSON.stringify(chatItem)),
        },
      });
    } else {
      goSendMsg();
    }
  }
};
const goAddFriend = () => {
  addFriend({
    friendId: friendInfo.uid,
    friendName: friendInfo.friendName || friendInfo.userName,
  }).then((res) => {
    if (res.code === 200) {
      showSuccessToast(res.message);
    }
  });
};
const onClickLeft = () => {
  router.go(-1);
};
</script>

<style scoped lang="scss">
.main {
  background-color: #ededed;
  min-height: 100vh;
}

.cellGroup {
  .cell {
    font-size: 15px;
    height: 40px;
    background-color: #fff;
    line-height: 40px;
    text-align: center;
    color: #596a90;
    font-weight: bold;

    .van-icon {
      vertical-align: middle;
    }

    & > span {
      margin-left: 3px;
    }
  }

  .slot {
    height: 20px;
  }
}

.userInfo {
  background-color: #fff;
  padding: 20px 15px;
  display: flex;

  :deep(.van-image__img, .van-image__error, .van-image__loading) {
    width: 70px;
    height: 70px;
    border-radius: 15px;
  }

  & > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    font-size: 12px;
    color: #898989;

    & > div:first-child {
      font-size: 18px;
      font-weight: bold;
      color: #333;

      span {
        margin-right: 5px;
      }
    }
  }
}
</style>
